<template>
  <div>
    <el-row :gutter="10">
      <el-col
        v-for="(item, index) in data"
        :key="index"
        :xs="24"
        :sm="12"
        :md="8"
        :lg="6"
      >
        <el-card style="position: relative">
          <div style="overflow: hidden">
            <img
              src="../assets/image.jpg"
              style="width: 68px; display: block; float: left"
            />
            <div style="float: left; margin-left: 10px">
              <h4 style="margin: 0; text-align: left">{{item.prjName}}</h4>
              <span>项目经理:{{item.prjManager}}</span>
              <span>立项日期:{{item.prjStartDate.slice(0,10)}}</span>
              <span>任务:{{item.taskCount}} 完成:{{item.taskDoneCount}} 进行:{{item.taskDoingCount}}</span>
            </div>
            <div style="font-size: 1px">{{item.projectStatus=="processing" ? "进行中":"审批中" }}</div>
            <img class="star" src="../assets/image.png" />
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import tableData from "../assets/json/data.json";

export default {
  data() {
    return {
      data: [],
    };
  },
  mounted() {
    this.data = tableData;
  },
};
</script>

<style lang="scss" scoped>
.el-col {
  border-radius: 4px;
  margin-bottom: 15px;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.el-card:hover {
  border: 1px solid rgb(75, 93, 247);
}
.el-col span {
  font-size: 7px;
  display: block;
  text-align: left;
}
.el-card .star {
  display: block;
  position: absolute;
  right: 20px;
  bottom: 20px;
}
// .el-card .circle{
//   width: 10px;
//   height: 10px;
//   background-color: blue;
// }
</style>
